<template>
  <div class="myPages homeClass">
    <div class="u-rela" v-if="bannerList.length > 0">
      <!-- <div style="width: 25%">
        
      </div> -->
      <div style="">
        <el-carousel :interval="5000" height="400px" motion-blur>
          <el-carousel-item v-for="item in bannerList" :key="item">
            <img :src="item.filePath" width="100%" height="100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div style="width: 25%">ssss</div> -->
      <div class="leftsidebar">
        <el-popover :width="300" popper-class="popperClass">
          <template #reference>
            <div class="leftsidebar_title"></div>
          </template>
          <template #default> </template>
        </el-popover>
      </div>
      <div class="rightsidebar">
        <el-row style="border-bottom: 1px solid rgba(255, 255, 255, 0.22)">
          <el-col
            :span="12"
            v-for="(rightSidebarItem, rightSidebarIndex) in rightsidebarList"
            :key="rightSidebarIndex"
            style="text-align: center"
            @click="hrefClick(rightSidebarIndex)"
          >
            <el-link
              class="rightsidebarSegment"
              :underline="false"
              :class="
                rightSidebarIndex == cur_rightsidebarIndex
                  ? 'rightsidebarActive'
                  : ''
              "
            >
              {{ rightSidebarItem.name }}
            </el-link>
          </el-col>
        </el-row>

        <ul>
          <li
            v-for="(rsContentItem, rsContentIndex) in rightsidebarContentList[
              cur_rightsidebarIndex
            ]"
            :key="rsContentIndex"
            style="margin-top: 10px"
          >
            <el-link
              class="rsContentLink"
              :underline="false"
              :href="rsContentItem.articleUrl"
            >
              {{ rsContentItem.articleTitle }}
            </el-link>
          </li>
        </ul>
      </div>
    </div>

    <div class="contentBox">
      <div
        v-for="(contentItem, contentIndex) in technicalProductList"
        :key="contentIndex"
      >
        <!-- 类型1 -->
        <el-scrollbar v-if="contentItem.uiCode == 'ui_1'">
          <div class="contentTitle">{{ contentItem.productName }}</div>

          <div class="scrollbar-flex-content">
            <div
              v-for="(item1, index1) in contentItem.technicalProductSonRespList"
              :key="index1"
              class="scrollbar-demo-item"
            >
              <img :src="item1.productIoc" class="typeImg1" />
              <div style="color: #888; margin-top: 13px; font-size: 12px">
                {{ item1.productName }}
              </div>
              <div class="image-mask">
                {{ item1.productOutline }}
              </div>
            </div>
          </div>
        </el-scrollbar>
        <!-- 类型2 -->
        <div v-if="contentItem.uiCode == 'ui_2'">
          <div style="height: 20px"></div>
          <div class="contentTitle">{{ contentItem.productName }}</div>
          <el-row :gutter="66">
            <el-col
              :span="6"
              v-for="(item2, index2) in contentItem.technicalProductSonRespList"
              :key="index2"
            >
              <img :src="item2.productIoc" class="typeImg2" />
              <div style="color: #202020; margin-top: 8px; font-weight: bold">
                {{ item2.productName }}
              </div>
              <div style="margin-top: 5px; color: #ff7900">
                ￥{{ item2.productPrice }}
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 类型3 -->

        <div style="margin: 50px 0px 30px" v-if="contentItem.uiCode == 'ui_3'">
          <div class="contentTitle">{{ contentItem.productName }}</div>
          <el-row :gutter="66">
            <el-col
              :span="6"
              v-for="(item3, index3) in contentItem.technicalProductSonRespList"
              :key="index3"
            >
              <div class="certificate_item">
                <img :src="item3.productIoc" alt="" class="typeImg3" />
                <div
                  style="margin: 3px 0px; font-weight: bold; font-size: 16px"
                >
                  {{ item3.productName }}
                </div>
                <div style="line-height: 28px; font-size: 15px">
                  {{ item3.productOutline }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 类型4 -->
        <div
          style="
            padding: 20px 120px 30px;
            background-color: #fafafa;
            margin: 0px -120px;
          "
          v-if="contentItem.uiCode == 'ui_4'"
        >
          <div class="contentTitle">{{ contentItem.productName }}</div>
          <HomeType
            :dataList="contentItem.technicalProductSonRespList"
          ></HomeType>
        </div>
      </div>
    </div>

    <div class="itemContent" v-if="aboutDic.aboutTitle">
      <el-row>
        <el-col :span="14">
          <div style="margin-top: 20px; margin-left: 120px">
            <div class="u-text-left" style="font-weight: bold">
              {{ aboutDic.aboutTitle }}
            </div>
            <div class="" style="margin-top: 30px">
              {{ aboutDic.aboutDescribe }}
            </div>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="8">
          <div class="u-flex" style="align-items: start; height: 300px">
            <div>
              <img
                :src="aboutDic.pictureOne"
                style="width: 200px; height: 300px"
              />
            </div>
            <div
              class="u-flex-col u-row-between"
              style="height: 305px; margin-left: 10px"
            >
              <div>
                <img
                  :src="aboutDic.pictureTow"
                  style="width: 200px; height: 140px"
                />
              </div>
              <div>
                <img
                  :src="aboutDic.pictureThree"
                  style="width: 200px; height: 140px"
                />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="3"> </el-col>
      </el-row>
    </div>

    <div
      style="
        margin: 30px 0px;
        background-color: #fafafa;
        text-align: center;
        padding: 30px;
        border-radius: 0px;
      "
      v-if="ourAdvantageList.length > 0"
    >
      <h1 style="color: #202020">环海锦润优势</h1>

      <el-space wrap alignment="center" :size="60">
        <div
          v-for="(ourAdvantageItem, ourAdvantageIndex) in ourAdvantageList"
          class="box-card1"
          :key="ourAdvantageIndex"
        >
          <h2>{{ ourAdvantageItem.advantageTitle }}</h2>
          <div style="padding: 10px">
            <div style="word-wrap: break-word">
              {{ ourAdvantageItem.advantageDescribe }}
            </div>
          </div>
        </div>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import homeApi from "@/api/home";
import homeType from "@/components/homeType.vue";
import HomeType from "@/components/homeType.vue";
let cur_rightsidebarIndex = ref(0);
let bannerList = reactive([]);
let technicalProductList = reactive([]);
let aboutDic = reactive({});
let ourAdvantageList = reactive([]);
let rightsidebarList = reactive([{ name: "精选文章" }, { name: "热门话题" }]);
let contentType1List = reactive([
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/1623131304085.png",
    title: "新手如何入门CTF",
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/1623130589112.png",
    title: "信息安全基础入门",
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/1623130613564.png",
    title: "安卓安全",
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/1623131304085.png",
    title: "二进制安全",
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/1623131304085.png",
    title: "二进制安全",
  },
]);
let contentType2List = reactive([
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/course/1659085140660.jpg",
    title: "CTF从入门到提高-Web",
    price: 1588,
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/course/1659085140660.jpg",
    title: "CTF从入门到提高-Web",
    price: 1588,
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/course/1659085140660.jpg",
    title: "CTF从入门到提高-Web",
    price: 1588,
  },
  {
    img: "https://static2.ichunqiu.com/icq/resources/fileupload/course/1659085140660.jpg",
    title: "CTF从入门到提高-Web",
    price: 1588,
  },
]);
let contentType3List = reactive([
  {
    img: "http://www.xatopsec-edu.com/img/certificate_cisp.jpg",
    title: "CISP认证：注册信息安全专业人员",
    content:
      "国家对信息安全人员资质的最高认可 国内首家官方授权培训机构：授权编号001",
  },
  {
    img: "http://www.xatopsec-edu.com/img/approve_cissp_pte.jpg",
    title: "CISP认证：注册信息安全专业人员",
    content:
      "国家对信息安全人员资质的最高认可 国内首家官方授权培训机构：授权编号001",
  },
  {
    img: "http://www.xatopsec-edu.com/img/certificate_ccsrp.jpg",
    title: "CISP认证：注册信息安全专业人员",
    content:
      "国家对信息安全人员资质的最高认可 国内首家官方授权培训机构：授权编号001",
  },
]);
let rightsidebarContentList = reactive([[], []]);
onMounted(() => {
  homeApi.getHomeList({ sort: "orderNum,asc" }).then((res) => {
    // console.log(res);
    Object.assign(bannerList, res.data);
  });

  homeApi
    .getarticle({ sort: "orderNum,desc", page: 1, size: 99999 })
    .then((res) => {
      console.log(res);
      const list = res.data;
      let list1 = [];
      let list2 = [];
      list.forEach((item) => {
        if (item.articleType == "1") {
          list1.push(item);
        } else {
          list2.push(item);
        }
      });
      Object.assign(rightsidebarContentList, [list1, list2]);
    });

  homeApi.getTechnicalProduct({ sort: "orderNum,asc" }).then((res) => {
    // console.log(res);
    Object.assign(technicalProductList, res.data);
  });
  homeApi.getourAdvantage({ sort: "orderNum,asc" }).then((res) => {
    // console.log(res);
    Object.assign(ourAdvantageList, res.data);
  });

  homeApi.getAbout({}).then((res) => {
    // console.log(res);
    Object.assign(aboutDic, res.data);
  });
});

function hrefClick(index: number) {
  console.log(index);
  cur_rightsidebarIndex.value = index;
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.itemContent {
  margin-top: 0px;
  /* height: 300px; */
  width: 100%;
  background-color: #fafafa;
  /* background-image: url(http://M61318.m151.ibw.cc/u/b4513d2c-e99d-414d-b4dc-abdeb0570e00/image/636705437233294451.png); */
  background-repeat: repeat;
  background-position: center;
  padding: 30px 0px;
}
.box-card {
  padding: 30px;
}
.box-card1 {
  width: 220px;
  height: 200px;
  border-radius: 10px;
  background-image: url("@/assets/img/youshiItem.png");
  background-repeat: repeat;
  background-position: center;
}
.leftsidebar {
  position: absolute;
  left: 10%;
  top: 0;
  bottom: 0px;
  /* background-color: red; */
  width: 180px;
  background: rgba(33, 33, 33, 0.5);
}
.leftsidebar_title {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
}
.popperClass {
  background-color: red;
}

.rightsidebar {
  position: absolute;
  right: 10%;
  top: 0;
  bottom: 0px;
  /* background-color: red; */
  width: 270px;
  background: rgba(33, 33, 33, 0.5);
}
.contentBox {
  margin: 20px 120px;

  .contentTitle {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
  }
  .scrollbar-flex-content {
    display: flex;
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #eee;
    padding: 20px 40px 17px;
    margin-right: 80px;
    margin-bottom: 20px;
    width: 15%;
  }
  .typeImg1 {
    display: inline-block;
    width: 100%;
    min-width: 200px;
    height: 130px;
  }
  .image-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
    padding: 10px 60px;
    font-size: 12px;
  }

  .typeImg2 {
    width: 100%;
    height: 170px;
    border-radius: 6px;
  }
  .itemType3 {
    display: inline-block;
    width: 380px;
    border: 1px solid #fff;
    text-align: left !important;
    background: #ffffff;
    padding: 10px;
    border-radius: 3px;
    box-sizing: border-box;
  }
}
.rightsidebarSegment {
  text-align: center;
  padding: 10px 10px;
  border-bottom: 0px solid #ff7900;
}
.rightsidebarActive {
  color: #fff;
  border-bottom: 1px solid #ff7900;
}
.el-link :active {
  color: #fff;
  border-bottom: 1px solid #ff7900;
}
.el-link :hover {
  color: #ff7900;
}

.rsContentLink {
  color: #fff;
  font-size: 12px;

  .rsContentLink:active {
    border-bottom: 0px solid #ff7900;
  }
}
ul li::marker {
  color: #fff;
}
.certificate_item {
  border: 1px solid #fff;
  text-align: left !important;
  background: #ffffff;
  padding: 10px 0px;
  border-radius: 3px;
  box-sizing: border-box;
}
.typeImg3 {
  width: 100%;
}

.scrollbar-demo-item:hover .image-mask {
  opacity: 1;
  cursor: default;
}
</style>
